<template>
  <view class="u-page__item" v-if="tabbar?.items?.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbar.style.color"
      :activeColor="tabbar.style.activeColor"
      :midTabBar="tabbar.mode === 2"
      :customStyle="tabbarStyle"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.items"
        :key="item.text"
        :text="item.text"
        :name="item.url"
        :badge="item.badge"
        :dot="item.dot"
        :badgeStyle="tabbar.badgeStyle"
        :isCenter="getTabbarCenter(index)"
        :centerImage="sheep.$url.cdn(item.iconUrl)"
        @tap="handleTabClick(item)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, unref } from 'vue';
  import sheep from '@/sheep';
  import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';

  const tabbar = computed(() => {
    return sheep.$store('app').template.basic?.tabbar;
  });

  const tabbarStyle = computed(() => {
    const backgroundStyle = tabbar.value.style;
    if (backgroundStyle) {
      return {
        backgroundColor: backgroundStyle.backgroundColor || '#ffffff',
      };
    }
    return {};
  });

  const path = computed(() => {
    return sheep.$route.path;
  });

  const getTabbarCenter = (index) => {
    return tabbar.value.mode === 2 && index === Math.floor(tabbar.value.items.length / 2);
  };

  // 处理tab点击事件
  const handleTabClick = (item) => {
    // 仅当为发布按钮（标记 isSpecial）时，弹出发布弹框
    if (item?.isSpecial === true) {
      uni.$emit('showPublishModal');
      return;
    }
    
    // 检查是否为订单页面，如果是则检查登录状态
    if (item?.url && typeof item.url === 'string') {
      // 判断是否为订单页面：通过 URL 或文本标签
      const isOrderPage = 
        item.url.includes('pages/order/index') || 
        item.url.includes('/pages/order/index') ||
        item.text === '订单';
      
      if (isOrderPage) {
        // 检查登录状态
        let isLogin = false;
        try {
          const userStore = sheep.$store('user');
          isLogin = userStore?.isLogin || false;
        } catch (e) {
          // store 未初始化时忽略错误
        }
        
        // 如果 store 中没有登录状态，检查 token
        if (!isLogin) {
          const token = uni.getStorageSync('token');
          isLogin = !!token;
        }
        
        if (!isLogin) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
          // 延迟跳转到登录页面
          setTimeout(() => {
            sheep.$router.go('/pages/index/login');
          }, 1500);
          return;
        }
      }
      
      // 正常路由跳转（忽略空/非法 url）
      sheep.$router.go(item.url);
    }
  };
</script>

<style lang="scss" scoped>
  .u-page__item {
    .u-page__item__slot-icon {
      width: 22px;
      height: 22px;
    }
  }
</style>